<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>天气案例_深度监视</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <!-- 
        深度监视：
            1：Vue中的watch默认不监测对象内部值的改变(一层)。
            2：配置deep:true可以监测对象内部值改变(多层)。
        备注：
            1：Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以。
            2：使用watch时根据数据的具体结构，决定是否采用深度监视。
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}, {{x}}</h2>

        <button @click="changeWheter">切换天气</button><br/>

        <h1>a的值 {{numbers.a}}</h1> <br/>
        <button @click="numbers.a++">点我让a+1</button><br/>

        <h1>b的值 {{numbers.b}}</h1>
        <button @click="numbers.b++">点我让b+1</button><br/>

        <button @click="numbers = {a:666,b:999}">彻底替换掉numbers</button><br/>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 vue在启动时生成生产提示    
        // 创建vue实例
        const vm = new Vue({
            el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: { //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                firstName: '徐',
                lastName: '亚远',
                isHot: true,
                x: 1,
                numbers:{
                    a:1,
                    b:2
                }
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWheter() {
                    this.x++
                    this.isHot = !this.isHot
                }
            },

            // 监视属性的第一种写法  new Vue()时传入watch配置
            watch: {
                isHot: {      // info也可以被监视
                    immediate: true, //初始化时让handler调用一下

                    // handler什么时候调用？当isHot发生改变时
                    handler(newValue, oldValue) {
                        console.log('isHot被修改了', newValue, oldValue)
                    }
                },

                // 监视多级结构中某个属性的变化
                'numbers.a':{
                    handler(){
                        console.log('a被改变了')
                    }
                },

                // 监视多级结构中所有属性的变化
                numbers:{
                    deep:true,
                    handler(){
                        console.log('numbers改变了')
                    }
                }
            }
        })

    </script>


</body>

</html>